<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2023-05-17 16:06:06
 * @LastEditors: hongweixun
 * @LastEditTime: 2023-07-07 11:51:36
-->
<template>
  <div class="school-handle-box">
    <Title>各学校办理率统计</Title>
    <el-row style="padding-top: 20px;">
      <div id="schoolLine"></div>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { Line } from '@antv/g2plot'
import { nextTick, onMounted, ref } from 'vue'
import { PiniaStore } from '../store/index'
const store = PiniaStore()
const lineCount = ref<any>(null)
// const data = ref<any>([
//   {
//     year: '1944',
//     value: 275,
//     category: '办理率'
//   },
//   {
//     year: '1944',
//     value: 1047,
//     category: '支付笔数'
//   },
//   {
//     year: '1944',
//     value: 54,
//     category: '办理笔数'
//   },
//   {
//     year: '1945',
//     value: 275,
//     category: '办理率'
//   },
//   {
//     year: '1945',
//     value: 820,
//     category: '支付笔数'
//   },
//   {
//     year: '1945',
//     value: 59,
//     category: '办理笔数'
//   },

//   {
//     year: '1946',
//     value: 292,
//     category: '办理率'
//   },
//   {
//     year: '1946',
//     value: 875,
//     category: '支付笔数'
//   },
//   {
//     year: '1946',
//     value: 61,
//     category: '办理笔数'
//   },
//   {
//     year: '1947',
//     value: 322,
//     category: '办理率'
//   },
//   {
//     year: '1947',
//     value: 992,
//     category: '支付笔数'
//   },
//   {
//     year: '1947',
//     value: 67,
//     category: '办理笔数'
//   },
//   {
//     year: '1948',
//     value: 364,
//     category: '办理率'
//   },
//   {
//     year: '1948',
//     value: 1015,
//     category: '支付笔数'
//   },
//   {
//     year: '1948',
//     value: 76,
//     category: '办理笔数'
//   },
//   {
//     year: '1949',
//     value: 362,
//     category: '办理率'
//   },
//   {
//     year: '1949',
//     value: 960,
//     category: '支付笔数'
//   },
//   {
//     year: '1949',
//     value: 81,
//     category: '办理笔数'
//   },
//   {
//     year: '1950',
//     value: 423,
//     category: '办理率'
//   },
//   {
//     year: '1950',
//     value: 1070,
//     category: '支付笔数'
//   },
//   {
//     year: '1950',
//     value: 97,
//     category: '办理笔数'
//   },
//   {
//     year: '1951',
//     value: 479,
//     category: '办理率'
//   },
//   {
//     year: '1951',
//     value: 1129,
//     category: '支付笔数'
//   },
//   {
//     year: '1951',
//     value: 115,
//     category: '办理笔数'
//   },
//   {
//     year: '1952',
//     value: 504,
//     category: '办理率'
//   },
//   {
//     year: '1952',
//     value: 1119,
//     category: '支付笔数'
//   },
//   {
//     year: '1952',
//     value: 124,
//     category: '办理笔数'
//   },
//   {
//     year: '1953',
//     value: 533,
//     category: '办理率'
//   },
//   {
//     year: '1953',
//     value: 1125,
//     category: '支付笔数'
//   },
//   {
//     year: '1953',
//     value: 131,
//     category: '办理笔数'
//   },
//   {
//     year: '1954',
//     value: 557,
//     category: '办理率'
//   },
//   {
//     year: '1954',
//     value: 1116,
//     category: '支付笔数'
//   },
//   {
//     year: '1954',
//     value: 138,
//     category: '办理笔数'
//   },
//   {
//     year: '1955',
//     value: 625,
//     category: '办理率'
//   },
//   {
//     year: '1955',
//     value: 1208,
//     category: '支付笔数'
//   },
//   {
//     year: '1955',
//     value: 150,
//     category: '办理笔数'
//   },
//   {
//     year: '1956',
//     value: 679,
//     category: '办理率'
//   },
//   {
//     year: '1956',
//     value: 1273,
//     category: '支付笔数'
//   },
//   {
//     year: '1956',
//     value: 161,
//     category: '办理笔数'
//   },
//   {
//     year: '1957',
//     value: 714,
//     category: '办理率'
//   },
//   {
//     year: '1957',
//     value: 1309,
//     category: '支付笔数'
//   },
//   {
//     year: '1957',
//     value: 178,
//     category: '办理笔数'
//   },
//   {
//     year: '1958',
//     value: 731,
//     category: '办理率'
//   },
//   {
//     year: '1958',
//     value: 1336,
//     category: '支付笔数'
//   },
//   {
//     year: '1958',
//     value: 192,
//     category: '办理笔数'
//   },
//   {
//     year: '1959',
//     value: 789,
//     category: '办理率'
//   },
//   {
//     year: '1959',
//     value: 1382,
//     category: '支付笔数'
//   },
//   {
//     year: '1959',
//     value: 206,
//     category: '办理笔数'
//   },
//   {
//     year: '1960',
//     value: 849,
//     category: '办理率'
//   },
//   {
//     year: '1960',
//     value: 1410,
//     category: '支付笔数'
//   },
//   {
//     year: '1960',
//     value: 227,
//     category: '办理笔数'
//   },
//   {
//     year: '1961',
//     value: 904,
//     category: '办理率'
//   },
//   {
//     year: '1961',
//     value: 1349,
//     category: '支付笔数'
//   },
//   {
//     year: '1961',
//     value: 240,
//     category: '办理笔数'
//   },
//   {
//     year: '1962',
//     value: 980,
//     category: '办理率'
//   },
//   {
//     year: '1962',
//     value: 1351,
//     category: '支付笔数'
//   },
//   {
//     year: '1962',
//     value: 263,
//     category: '办理笔数'
//   },
//   {
//     year: '1963',
//     value: 1052,
//     category: '办理率'
//   },
//   {
//     year: '1963',
//     value: 1396,
//     category: '支付笔数'
//   },
//   {
//     year: '1963',
//     value: 286,
//     category: '办理笔数'
//   },
//   {
//     year: '1964',
//     value: 1137,
//     category: '办理率'
//   },
//   {
//     year: '1964',
//     value: 1435,
//     category: '支付笔数'
//   },
//   {
//     year: '1964',
//     value: 316,
//     category: '办理笔数'
//   },
//   {
//     year: '1965',
//     value: 1219,
//     category: '办理率'
//   },
//   {
//     year: '1965',
//     value: 1460,
//     category: '支付笔数'
//   },
//   {
//     year: '1965',
//     value: 337,
//     category: '办理笔数'
//   },
//   {
//     year: '1966',
//     value: 1323,
//     category: '办理率'
//   },
//   {
//     year: '1966',
//     value: 1478,
//     category: '支付笔数'
//   },
//   {
//     year: '1966',
//     value: 364,
//     category: '办理笔数'
//   },
//   {
//     year: '1967',
//     value: 1423,
//     category: '办理率'
//   },
//   {
//     year: '1967',
//     value: 1448,
//     category: '支付笔数'
//   },
//   {
//     year: '1967',
//     value: 392,
//     category: '办理笔数'
//   },
//   {
//     year: '1968',
//     value: 1551,
//     category: '办理率'
//   },
//   {
//     year: '1968',
//     value: 1448,
//     category: '支付笔数'
//   },
//   {
//     year: '1968',
//     value: 424,
//     category: '办理笔数'
//   },
//   {
//     year: '1969',
//     value: 1673,
//     category: '办理率'
//   },
//   {
//     year: '1969',
//     value: 1486,
//     category: '支付笔数'
//   },
//   {
//     year: '1969',
//     value: 467,
//     category: '办理笔数'
//   },
//   {
//     year: '1970',
//     value: 1839,
//     category: '办理率'
//   },
//   {
//     year: '1970',
//     value: 1556,
//     category: '支付笔数'
//   },
//   {
//     year: '1970',
//     value: 493,
//     category: '办理笔数'
//   },
//   {
//     year: '1971',
//     value: 1947,
//     category: '办理率'
//   },
//   {
//     year: '1971',
//     value: 1559,
//     category: '支付笔数'
//   },
//   {
//     year: '1971',
//     value: 530,
//     category: '办理笔数'
//   },
//   {
//     year: '1972',
//     value: 2057,
//     category: '办理率'
//   },
//   {
//     year: '1972',
//     value: 1576,
//     category: '支付笔数'
//   },
//   {
//     year: '1972',
//     value: 560,
//     category: '办理笔数'
//   },
//   {
//     year: '1973',
//     value: 2241,
//     category: '办理率'
//   },
//   {
//     year: '1973',
//     value: 1581,
//     category: '支付笔数'
//   },
//   {
//     year: '1973',
//     value: 588,
//     category: '办理笔数'
//   },
//   {
//     year: '1974',
//     value: 2245,
//     category: '办理率'
//   },
//   {
//     year: '1974',
//     value: 1579,
//     category: '支付笔数'
//   },
//   {
//     year: '1974',
//     value: 597,
//     category: '办理笔数'
//   },
//   {
//     year: '1975',
//     value: 2132,
//     category: '办理率'
//   },
//   {
//     year: '1975',
//     value: 1673,
//     category: '支付笔数'
//   },
//   {
//     year: '1975',
//     value: 604,
//     category: '办理笔数'
//   },
//   {
//     year: '1976',
//     value: 2314,
//     category: '办理率'
//   },
//   {
//     year: '1976',
//     value: 1710,
//     category: '支付笔数'
//   },
//   {
//     year: '1976',
//     value: 630,
//     category: '办理笔数'
//   },
//   {
//     year: '1977',
//     value: 2398,
//     category: '办理率'
//   },
//   {
//     year: '1977',
//     value: 1756,
//     category: '支付笔数'
//   },
//   {
//     year: '1977',
//     value: 650,
//     category: '办理笔数'
//   },
//   {
//     year: '1978',
//     value: 2392,
//     category: '办理率'
//   },
//   {
//     year: '1978',
//     value: 1780,
//     category: '支付笔数'
//   },
//   {
//     year: '1978',
//     value: 680,
//     category: '办理笔数'
//   },
//   {
//     year: '1979',
//     value: 2544,
//     category: '办理率'
//   },
//   {
//     year: '1979',
//     value: 1875,
//     category: '支付笔数'
//   },
//   {
//     year: '1979',
//     value: 721,
//     category: '办理笔数'
//   },
//   {
//     year: '1980',
//     value: 2422,
//     category: '办理率'
//   },
//   {
//     year: '1980',
//     value: 1935,
//     category: '支付笔数'
//   },
//   {
//     year: '1980',
//     value: 737,
//     category: '办理笔数'
//   },
//   {
//     year: '1981',
//     value: 2289,
//     category: '办理率'
//   },
//   {
//     year: '1981',
//     value: 1908,
//     category: '支付笔数'
//   },
//   {
//     year: '1981',
//     value: 755,
//     category: '办理笔数'
//   },
//   {
//     year: '1982',
//     value: 2196,
//     category: '办理率'
//   },
//   {
//     year: '1982',
//     value: 1976,
//     category: '支付笔数'
//   },
//   {
//     year: '1982',
//     value: 738,
//     category: '办理笔数'
//   },
//   {
//     year: '1983',
//     value: 2176,
//     category: '办理率'
//   },
//   {
//     year: '1983',
//     value: 1977,
//     category: '支付笔数'
//   },
//   {
//     year: '1983',
//     value: 739,
//     category: '办理笔数'
//   },
//   {
//     year: '1984',
//     value: 2106,
//     category: '办理率'
//   },
//   {
//     year: '1984',
//     value: 1877,
//     category: '支付笔数'
//   },
//   {
//     year: '1984',
//     value: 1739,
//     category: '办理笔数'
//   }
// ])
interface PropsType {
  //   是否需要更多按钮
  canvasHeight?: any
  canvasWidth?: any
  list: any
}
const props = withDefaults(defineProps<PropsType>(), {
  canvasHeight: 320,
  canvasWidth: 610,
  list: []
})
// watch(
//   store.ratioList,
//   (newVal, oldVal) => {
//     // console.log(newVal)
//     // console.log(oldVal)
//     if(newVal){
//       // initLine(store.ratioList)
//     }
//   },
//   { deep: true, immediate: true }
// )
const initLine = () => {
  const data = store.ratioList
  if(lineCount.value){
    lineCount.value.changeData(data)
    return false
  }
  lineCount.value = new Line('schoolLine', {
    data,
    height: props.canvasHeight - 100,
    width: props.canvasWidth,
    xField: 'year',
    yField: 'value',
    // legend: false,
    legend: {
      position: 'top',
      marker: {
        // symbol: ''
      },
      itemName: {
        style: {
          fill: '#fff'
        }
      }
    },
    smooth: true,
    seriesField: 'category',
    color: ['#2276FC', '#5FD5EC', '#48FFB2', '#F984E6', '#F9DA4F'],
    area: {
      color: ['#2276FC', '#5FD5EC', '#48FFB2', '#F984E6', '#F9DA4F']
    },
    lineStyle: {
      lineWidth: 1
    },
    xAxis: {
      type: 'time',
      tickLine: null,
      subTickLine: null,
      line: {
        style: {
          stroke: '#0d3b77',
          lineWidth: 1,
          lineDash: [2, 5],
          strokeOpacity: 0.4,
          shadowColor: '#0d3b77',
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          cursor: 'pointer'
        }
      },
      label: {
        formatter: (v:any) => {
          const str = (Number(v.split('-')[0]) - 2000).toString()
          return str
        },
        style: {
          fill: '#fff'
        }
      }
    },
    yAxis: {
      tickLine: null,
      subTickLine: null,
      label: {
        // 数值格式化为千分位
        formatter: v => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, s => `${s},`),
        style: {
          fill: '#fff'
        }
      },
      grid: {
        line: {
          style: {
            stroke: '#0d3b77',
            lineWidth: 1,
            lineDash: [4, 5],
            strokeOpacity: 0.4,
            shadowColor: '#0d3b77',
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            cursor: 'pointer'
          }
        }
      }
    },
    tooltip: {
      title: 'name',
      fields: ['category', 'value', 'rate'],
      // 处理弹窗数值展示
      formatter: datum => {
        // 如果是写死的常量则可以不进行声明
        return { name: '总金额', value: datum.value, user: datum.category,rate: datum.rate }
      },
      // 自定义 item 模板：每项记录的默认模板，自定义模板时必须包含各个 dom 节点的 class。
      itemTpl: `
    <li class="g2-tooltip-list-item">
      <span class="g2-tooltip-marker" style="background-color: {color};"></span>
      <span class="g2-tooltip-name">{user}</span>:
      <span class="g2-tooltip-value">{value}{rate}</span>
    </li>
  `
    }
  })

  lineCount.value.render()
}
onMounted(() => {
  nextTick(() => {
    // setTimeout(() => {
    //   initLine()
    // },1500)
  })
})
defineExpose({
  initLine
})
</script>
